Header Email Subscription Widget With Social Buttons
This is the stylish and clean header email subscription widget in which social buttons or icons are also available for increasing social followers. This widget is divided into two sections. Left portion of this widget is having subscription form where Name and Email field are implement along with the subscribe button. Heading and a little spam message is also available in that area. While right portion of this widget is having the social buttons which are Facebook, Twitter, Google+, Feed burner and Pinterest. This widget is gonna obviously help you in increasing your email subscribers and social fans because this will be implemented in the header and header is the great place for attracting your visitors for subscribing you.
Tutorial
Well, I've told you something about this widget and now you may be want to implement it in your blog. Don't worry you can do this just following the simple steps below.
- Go To Blogger >> Layout >> Add a Gadget (In The Header Area)
- Choose HTML/JavaScript and Paste The Following Code In The Content Box
<style>
#byard-topsubsbox {background:#fff; width:940px!important; height:90px!important;margin-top:20px; padding:10px;box-shadow:5px 5px 5px #ccc; border:1px solid #ddd;overflow:hidden;}
#subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 168);padding-right: 56px;margin-top: -10px;padding-top:9px;}
.subsbox-heading {font-size:20px; font-family:'Source Sans Pro'; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
.topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjprG5OeHwLVmAfjHOd70Deagl3GhP7stx80Kt80G7xoZO9eJANkn19PZYoXKgJv5CyRKEzz72m5r7rvcOx7cEGoWPpT9Gji4j2gC9LEpsFAOa392r2VvBFE72olyyKome5y3V2UMZckT8/s320/name.png) no-repeat 7px 8px;border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px; margin-top:10px; height:24px; padding:5px 15px 5px 28px; vertical-align:top; display:inline-block;margin-left:15px;}
.topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LU4_Ros9840GyKgi1-LvPW_Ird6GnZMJyAE4vM2BERibJMx_lUcJp88Oe2Nq6J8fcvSLwkwgtwVa6d7XLn_65ILLJY62nnESuQc6v1ksVWaCFlX14fJqs46xxnQ5xwLnyl9-leg4ANo/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-left:5px; margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; display:inline-block;}
.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00B3FF', endColorstr='#349ECB');background-color:#00B3FF; margin-top:12px; margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;padding:6px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#349ECB', endColorstr='#00B3FF');background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;}
#socialsection {float:left;margin-top:20px;}
.socialheading{font-size:20px; font-family:'Source Sans Pro'; text-align:right;margin-right:20px;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
.socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}
.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}
.socialicons li:nth-child(6) {padding: 0;}
.socialicons li a img{height:49px;width:49px}
</style>
<!-- Top Subsbox By Www.BloggerYard.Com Start -->
<div id='byard-topsubsbox'>
<div id='subscriptionsection'>
<div class='subsbox-heading'>Subscribe For Free Updates!</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
<input class='topsubsboxname' name='name' onblur='if (this.value == '') {this.value = 'Your Name';}' onfocus='if (this.value == 'Your Name') {this.value = '';}' value='Your Name'/>
<input class='topsubsboxemail' name='email' onblur='if (this.value == '') {this.value = 'Your Email Address';}' onfocus='if (this.value == 'Your Email Address') {this.value = '';}' value='Your Email Address'/>
<input class='topsubsboxbutton' type='submit' value='Sign Up!'/>
</form>
<p style='margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>We'll not spam mate! We promise.</p>
</div>
<div class='socialicons'>
<div class='socialheading'>Become Our Fan on Social Sites!</div>
<ul>
<li><a href='https://www.facebook.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVkqIEMZ_0fU_uH7j5t4vQoGqkW1AMU7hcIs3QCaUcoDKXm6ag8kTymTVzwcs597i3FP8oVwjfmZWdA1889eY3Wg5Fl1ZueC8p6WKHfD5aiO7EZrKC1Mzt-gEh2uoHdvm3zxWQEpGF5wRi/s1600/facebook_64.png' title='Facebook'/></a></li>
<li><a href='https://twitter.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAD3cFo7NfKHEol5ycM0aNlkb_8UYxr6mXSKIQ7OhFWTuvrEIVxwRT9e-rSXlahtxJf_zPd2UAf_g35LM2p_SW-VNMSaFtL0h0AEqw5IsWyUL1EUopKUjKRNFFr0Zf-ltMxzv5E9gjNci/s1600/twitter_64.png' title='Twitter'/></a></li>
<li><a href='https://plus.google.com/101996924620264617682/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgyLZkPw44FY6NGKgQfwtcMHXNIz_EoZ8NVT1Xof5fqRfapwnRU2XcNV8zS5B3KIXDce0aiv0aBlAwhg6RaM309wIrT5hMb7pYIVVtOl-4cPR9tadjQ0h50_9zoEnlBaCtRypsfdfb-hw/s1600/google-plus_64.png' title='Google +'/></a></li>
<li><a href='http://feeds.feedburner.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPjRqauXfE9F32KrP1N3VbQ-SDbOBBj7afrk0PQY1eMDIX2gdeAb_kcuED5Zn8bh8QZ-8R3A-OlFghyZYaPGbFei8SG8_Vtoph2olgUDUL2wtHC1oodTnxCAc2JtTFOtxIEne2O6hY9WB/s1600/rss_64.png' title='Rss'/></a></li>
<li><a href='http://pinterest.com/yaqoobhisbani/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2kpekd7IZZ2KiOSu8qSoB6FK2HFyWlIgiw7zDQFt3XXq2P3GaaXCpdQtswb7Ikza57FtC4aiPARR57BChXOlsM1fSYCdxe0A0hbZk9GElcqaf_1guKDv-pB-fcv2s4YipCznKEXDxPtq/s1600/pinterest_64.png' title='Pinterest'/></a></li>
</ul> </div>
</div>
<!-- Top Subsbox By Www.BloggerYard.Com End -->
- Replace The Highlighted URLs With Yours
- Click "Save" and You've Done!
Final Words
So friends this was our third resource which is an stylish subscription widget for header. I hope you've liked this widget and you're using this in your blog. However, If you wish to share this with your readers and you can share this but you'll need to link back us as credits. Any problem? let me know in comments. Take Care. Happy Blogging!
